<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><g:layoutTitle default="Photo Management" /></title>
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel='stylesheet' />
<asset:javascript src="home/js/jquery-1.9.1.min.js"/>
<asset:javascript src="home/js/jquery-ui-1.9.2.min.js"/>
<asset:javascript src="home/js/modernizr.min.js"/>
<asset:javascript src="home/js/bootstrap.min.js"/>
<asset:javascript src="home/js/jquery.uniform.min.js"/>
<asset:javascript src="home/js/home.js"/>

<asset:stylesheet rel="stylesheet" href="home/css/home.css" />
<asset:stylesheet rel="stylesheet" href="home/css/style.default.css" />

<asset:stylesheet rel="stylesheet" href="home/css/photo/style.css" />
<asset:stylesheet rel="stylesheet" href="home/css/uploadform.css" />
<asset:stylesheet rel="stylesheet" href="home/css/photo/hover.css" />
<asset:stylesheet rel="stylesheet prefetch" href="home/css/photo/photoswipe.css" />
<asset:stylesheet rel="stylesheet" href="home/css/photo/font-awesome.min.css" />
<asset:stylesheet rel="stylesheet prefetch" href="home/css/photo/default-skin/default-skin.css" />

<asset:stylesheet rel="stylesheet" href="home/css/photo/grid.css" />
<asset:stylesheet rel="stylesheet" href="home/css/photo/main" />


<g:layoutHead />

</head>
<body>
 
 <div class="mainwrapper">
  <div class="header">
    <div class="logo"> <a href="index.html">
    <asset:image  src="icons/prilogo.png" />
    </a> </div>
    <div class="headerinner">
      <ul class="headmenu">
        <li class="infosearchbar">
          <div class="pageheader">
            <div class="pageicon"><span class="iconfa-laptop"></span></div>
            <div class="pagetitle">
              <h5>Manage Photos, Documents &amp; more</h5>
              <h3>Media Manager</h3>
            </div>
          </div>
        </li>
        <li class="right">
          <div class="userloggedinfo"> <asset:image  src="icons/profile.png" />
            <div class="userinfo">
              <h5><small>${session.userEmail}</small></h5>
              <ul>
                <li><a href="editprofile.html">Edit Profile</a></li>
                <li><a href="">Account Settings</a></li>
                <li><a href="/user/logOut">Sign Out</a></li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
      <!--headmenu--> 
    </div>
  </div>
  <div class="leftpanel">
    <div class="leftmenu">
      <ul class="nav nav-tabs nav-stacked">
        <li class="nav-header">Apps</li>
        <li class="active recursor"><a class="resizeleftbar recursor" href="manager.html"><span class="iconfa-laptop refontleftbar recursor"></span>All Files</a></li>
        <li><a  href="history.html"><span class="iconfa-picture refontleftbar"></span> Photo</a></li>
        <li><a  href="history.html"><span class="iconfa-time refontleftbar"></span> History</a></li>
        <li><a  href="share.html"><span class="iconfa-share refontleftbar"></span> Share</a></li>
        <li><a  href="trash.html"><span class="iconfa-trash refontleftbar"></span>Trash</a></li>
      </ul>
    </div>
    <!--leftmenu--> 
    
  </div>
  <!-- leftpanel -->
  
  <div class="rightpanel">
    <ul class="breadcrumbs">
      <li><a href="dashboard.html"><i class="iconfa-home"></i></a> <span class="separator"></span></li>
      <li>Media Manager</li>
      <li class="right"> <a href="" data-toggle="dropdown" class="dropdown-toggle"><i class="icon-tint"></i> Color Skins</a>
        <ul class="dropdown-menu pull-right skin-color">
          <li><a href="default">Default</a></li>
          <li><a href="navyblue">Navy Blue</a></li>
          <li><a href="palegreen">Pale Green</a></li>
          <li><a href="red">Red</a></li>
          <li><a href="green">Green</a></li>
          <li><a href="brown">Brown</a></li>
        </ul>
      </li>
    </ul>
    <div class="pageheader pageheader-custome">
      <form action="results.html" method="post" class="searchbar">
        <input type="text" name="keyword" placeholder="To search type and hit enter..." />
      </form>
      <ul class="list-nostyle list-inline">
        <li> <a href="#uploadModal" data-toggle="modal" class="btn btn-rounded refontbtn"> <i class="iconfa-upload-alt refonticon"></i> &nbsp; Upload</a> </li>
        <li>
          <div class="btn-group">
            <button value="Create Text File"class="btn btn-primary refont2btn"> <i class="iconfa-file refonticon"></i>&nbsp;&nbsp;</button>
          </div>
          <div class="btn-group">
            <button id="newfolderbtn" value="New Folder" onClick="newfolder()" class="btn btn-primary refont2btn"> <i class="iconfa-folder-close refonticon"></i>&nbsp;&nbsp;</button>
            <!-- <ul class="dropdown-menu">
                             
                            </ul>-->
            <div class="create-folder-arrow"></div>
            <div class="dropdowncontainer" >
              <div class="wrapwidgetcontent">
                <div class="foldername">
                  <input onBlur="hidecontainer();" id="namenewfolder" type="text">
                </div>
                <div class="folderbtncreate"> <a id="btncreatefolder" href="" class="btn btn-primary">Create</a> </div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="btn-group">
            <button value="" class="btn btn-primary refont2btn"> <i class="iconfa-download refonticon"></i>&nbsp;Download</button>
            <button value=""class="btn btn-primary refont2btn"> <i class="iconfa-remove-circle refonticon"></i>&nbsp;Delete</button>
            <button value="" class="btn btn-primary refont2btn"> <i class="iconfa-share refonticon"></i>&nbsp;Share</button>
          </div>
          <div class="btn-group">
            <button class="btn dropdown-toggle btn-primary refont2btn" data-toggle="dropdown"> <i class="iconfa-th refonticon"> </i> &nbsp; More &nbsp;<span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li class="verticalstack"><a href="#"><i class="iconfa-music"></i> &nbsp;Move</a></li>
              <li class="verticalstack"><a href="#"><i class="iconfa-star"></i> &nbsp;Copy</a></li>
              <li class="verticalstack"><a href="#"><i class="iconfa-globe"></i> &nbsp;Move to Trash</a></li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
    
    
    <!--pageheader-->
    
	
    <div class="maincontent">
      <div class="maincontentinner">
        <div class="mediamgr">
          <div class="mediamgr_left">
            <div class="mediamgr_content">
                 	<g:layoutBody />
             
            
            <!--mediamgr_content--> 
            </div>
          </div>
          <!--mediamgr_left --> 
          
        </div>
        <br class="clearall" />
      </div>
      <!--mediamgr-->
      
      <div class="footer">
        <div class="footer-left"> <span>@2015. All Rights Reserved.</span> </div>
        <div class="footer-right"> <span>Designed by: <a href="http://www.zingpoll.com/">Sunwheel Team</a></span> </div>
      </div>
      <!--footer--> 
      
    </div>
    
    <!--maincontentinner--> 
  </div>
  <!--maincontent--> 
  
</div>
<!--rightpanel-->


<!--mainwrapper-->



<g:render template="/photo/uploadImageForm"></g:render>

	<script type="text/javascript">
		$(function() {
			// OPACITY OF BUTTON SET TO 0%
			$(".roll").css("opacity", "0");

			// ON MOUSE OVER
			$(".roll").hover(function() {

				// SET OPACITY TO 70%
				$(this).stop().animate({
					opacity : .7
				}, "slow");
			},

			// ON MOUSE OUT
			function() {

				// SET OPACITY BACK TO 50%
				$(this).stop().animate({
					opacity : 0
				}, "slow");
			});
		});
	</script>

	

	<asset:javascript src="home/js/photo/index.js" />
	<asset:javascript src="home/js/photo/photoswipe.min.js" />
	<asset:javascript src="home/js/photo/photoswipe-ui-default.js" />
	<asset:javascript src="home/js/photo/jquery.imagesloaded.min.js" />
	<asset:javascript src="home/js/photo/jquery-imagefill.js" />

	<script>
		$('.grid-quarter').imagefill();
	</script>



</body>
</html>